import React from "react";
import {
  Modal,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalFooter,
  Button,
  Card,
  CardBody,
  Avatar,
  Chip,
  Divider,
  Link,
  Image
} from "@nextui-org/react";

export interface AboutUsModalProps {
  isOpen: boolean;
  onOpenChange: () => void;
}

export default function AboutUsModal({ isOpen, onOpenChange }: AboutUsModalProps) {
  return (
    <Modal
      isOpen={isOpen}
      onOpenChange={onOpenChange}
      size="3xl"
      scrollBehavior="inside"
      backdrop="blur"
    >
      <ModalContent>
        {(onClose) => (
          <>
            <ModalHeader className="flex flex-col gap-1">
              <h2 className="text-xl font-bold">关于我们</h2>
              <p className="text-small text-default-500">了解Me Notes背后的故事</p>
            </ModalHeader>
            <ModalBody>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-6">
                <div>
                  <h3 className="text-lg font-bold mb-3">项目愿景</h3>
                  <p className="text-small text-default-700 dark:text-default-400 mb-3">
                    Me Notes致力于打造最直观、高效的知识管理平台，让每个人都能轻松记录、整理和分享自己的想法和知识。
                    我们相信，通过简化知识管理流程，能够释放人们的创造力和生产力。
                  </p>
                  <p className="text-small text-default-700 dark:text-default-400">
                    作为一个开源项目，欢迎感兴趣的开发者参与贡献，共同改进这个笔记应用，
                    使知识管理不再是负担，而是一种乐趣。
                  </p>
                </div>

                <div>
                  <h3 className="text-lg font-bold mb-3">项目起源</h3>
                  <p className="text-small text-default-700 dark:text-default-400 mb-3">
                    Me Notes始于2025年的一个毕业设计项目，最初目标是创建一个具有现代化UI和优秀用户体验的笔记应用。
                    随着项目的发展，我引入了微服务架构、AI辅助功能等创新特性，使其成为一个功能完善的知识管理平台。
                  </p>
                  <p className="text-small text-default-700 dark:text-default-400">
                    如今，Me Notes已经开源，希望能够帮助更多有类似需求的人们，并期待它能在社区的帮助下不断成长。
                  </p>
                </div>
              </div>

              <Divider className="my-4" />

              <h3 className="text-lg font-bold mb-3">项目成员</h3>
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6 mx-auto w-full">
                <Card className="p-0">
                  <CardBody className="text-center p-5">
                    {/* <Avatar
                      src="https://q1.qlogo.cn/g?b=qq&nk=3487297072&s=640"
                      className="w-20 h-20 mx-auto mb-3"
                    /> */}
                    <Image
                      src="https://q1.qlogo.cn/g?b=qq&nk=3487297072&s=640"
                      className="w-screen h-20 mx-auto mb-3 object-cover"
                    />
                    <h4 className="font-bold text-medium">Evan</h4>
                    <p className="text-small text-default-500 mb-2">项目负责人 & 全栈开发</p>
                    <div className="flex justify-center gap-1 flex-wrap">
                      <Chip size="sm" color="primary" variant="flat">Spring Cloud</Chip>
                      <Chip size="sm" color="success" variant="flat">React</Chip>
                      <Chip size="sm" color="secondary" variant="flat">DevOps</Chip>
                    </div>
                  </CardBody>
                </Card>

                <Card className="p-0">
                  <CardBody className="text-center p-5">
                    {/* <Avatar
                      src="https://q1.qlogo.cn/g?b=qq&nk=3194464047&s=640"
                      className="w-20 h-20 mx-auto mb-3"
                    /> */}
                    <Image
                      src="https://q1.qlogo.cn/g?b=qq&nk=3194464047&s=640"
                      className="w-screen h-20 mx-auto mb-3 object-cover"
                    />
                    <h4 className="font-bold text-medium">君君</h4>
                    <p className="text-small text-default-500 mb-2">技术顾问</p>
                    <div className="flex justify-center gap-1 flex-wrap">
                      <Chip size="sm" color="warning" variant="flat">架构设计</Chip>
                      <Chip size="sm" color="danger" variant="flat">功能建议</Chip>
                    </div>
                  </CardBody>
                </Card>
              </div>


              <Divider className="my-4" />

              <div className="grid grid-cols-1 md:grid-cols-12 gap-4">
                <Card className="md:col-span-7 bg-gradient-to-br from-indigo-50 to-pink-50 dark:from-indigo-900/20 dark:to-pink-900/20">
                  <CardBody>
                    <h3 className="text-lg font-bold mb-3">加入我们</h3>
                    <p className="text-small text-default-700 dark:text-default-400 mb-3">
                      欢迎访问项目仓库，查看源码或提出建议。如果您对项目感兴趣，可以通过Star、Fork或提交Pull Request的方式参与进来。
                    </p>
                    <div className="flex flex-wrap gap-2 mt-3">
                      <Button as={Link} color="primary" href="https://gitee.com/uyevan/wow-note-spring" target="_blank" size="sm">
                        访问Gitee仓库
                      </Button>
                    </div>
                  </CardBody>
                </Card>

                <Card className="md:col-span-5">
                  <CardBody>
                    <h3 className="text-lg font-bold mb-3">联系我们</h3>
                    <div className="space-y-3">
                      <div className="flex items-center gap-3">
                        <Avatar
                          size="sm"
                          src="https://q1.qlogo.cn/g?b=qq&nk=3487297072&s=100"
                        />
                        <div>
                          <p className="text-small font-medium">Evan</p>
                          <p className="text-small text-default-500">QQ: 3487297072</p>
                        </div>
                      </div>
                      <div className="flex items-center gap-3">
                        <Avatar
                          size="sm"
                          src="https://q1.qlogo.cn/g?b=qq&nk=3194464047&s=100"
                        />
                        <div>
                          <p className="text-small font-medium">君君</p>
                          <p className="text-small text-default-500">QQ: 3194464047</p>
                        </div>
                      </div>
                    </div>
                  </CardBody>
                </Card>
              </div>

              <div className="text-center pt-4">
                <Image
                  alt="Me Notes Logo"
                  src="https://i.imgur.com/QDLwzMS.png"
                  className="h-12 object-contain mx-auto"
                />
                <p className="text-small text-default-500 mt-2">© 2025 Me Notes. 个人毕业设计项目</p>
              </div>
            </ModalBody>
            <ModalFooter>
              <Button color="primary" variant="light" onPress={onClose}>
                关闭
              </Button>
              <Button
                color="primary"
                as={Link}
                href="https://gitee.com/uyevan/wow-note-spring"
                target="_blank"
              >
                访问开源仓库
              </Button>
            </ModalFooter>
          </>
        )}
      </ModalContent>
    </Modal>
  );
}